<template>
	<view class="xubao-node-config">
		<view class="create-project-form">
			<view class="create-item">
				<text class="info-item-title">转移对象</text>
				<input class="info-item-input" type="text" @click="handleOpenTransferPopup"
					placeholder-class="placeholderFontClass" disabled readonly placeholder="请选择转移对象" v-model="transfer">
				<uni-icons class="right-arrow-icon" type="forward" size="14" color="#999"></uni-icons>
			</view>
			<view class="create-item">
				<text class="info-item-title">继承对象</text>
				<input class="info-item-input" type="text" @click="handleOpenInheritPopup"
					placeholder-class="placeholderFontClass" disabled readonly placeholder="请选择继承对象" v-model="inherit">
				<uni-icons class="right-arrow-icon" type="forward" size="14" color="#999"></uni-icons>
			</view>


		</view>
		<button class="create-btn" @click.stop.prevent="handleTransfer">确认转移</button>

		<!-- 转移对象popup -->
		<van-popup :show="transferPopShow" position="bottom">
			<van-picker show-toolbar :columns="transferNameList" @confirm="onTransferConfirm"
				@cancel="transferPopShow = false" />
		</van-popup>
		<!-- 继承对象popup -->
		<van-popup :show="inheritPopShow" position="bottom">
			<van-picker show-toolbar :columns="transferNameList" @confirm="onInheritConfirm"
				@cancel="inheritPopShow = false" />
		</van-popup>
	</view>
</template>

<script>
	import apiRqs from "@/api/api-request.js";
	export default {
		data() {
			return {
				transferPopShow: false,
				transfer: "",
				transferNameList: [],
				inheritPopShow: false,
				inherit: "",
			}
		},
		onLoad() {
			this.handleGetMemberList();
		},
		methods: {
			handleOpenTransferPopup() {
				this.transferPopShow = true;
			},
			onTransferConfirm(value) {
				this.transfer = value.detail.value;
				this.transferPopShow = false;
			},
			handleOpenInheritPopup() {
				this.inheritPopShow = true;
			},
			onInheritConfirm(value) {
				this.inherit = value.detail.value;
				this.inheritPopShow = false;
			},
			// 获取用户列表
			handleGetMemberList() {
				var that = this;
				apiRqs._getUser().then((res) => {
					console.log('成员列表', res);
					if (res.code == 200) {
						const newData = JSON.parse(JSON.stringify(res.data));
						let nameList = [];
						for (let i = 0; i < newData.length; i++) {
							nameList.push(newData[i].realName);
						}
						that.transferNameList = nameList;
					}
				}).catch((err) => {
					console.log('err', err)
				})
			},
			// 确认转移
			handleTransfer() {
				let {
					transfer,
					inherit
				} = this;
				if (transfer == "") {
					getApp().showToast("转移对象不能为空");
					return false;
				} else if (inherit == "") {
					getApp().showToast("继承对象不能为空");
					return false;
				} else {
					let rqsData = {
						"fromUser": transfer,
						"toUser": inherit
					};
					getApp().showLoading();
					apiRqs._onWorkTransferSubmit(rqsData).then((res) => {
						uni.hideLoading();
						console.log('转移结果', res);
						if (res.code == 200) {
							getApp().showToast("转移成功", 'success');
							setTimeout(() => {
								uni.navigateBack();
							}, 1500)
						} else {
							getApp().showToast(res.msg);
						}
					})
				}

			},
		},
	}
</script>

<style lang="less">
	page {
		background-color: #f5f5f5;
	}

	.xubao-node-config {
		.create-project-form {
			margin: 20px;

			.create-item {
				display: flex;
				align-items: center;
				width: 100%;
				border-bottom: 1px solid #f5f5f5;
				background-color: #fff;
				padding: 16px 15px;
				box-sizing: border-box;
				position: relative;

				.right-arrow-icon {
					position: absolute;
					right: 10px;
				}

				&:first-child {
					border-top: 1px solid #f5f5f5;
					border-top-left-radius: 4px;
					border-top-right-radius: 4px;
				}

				&:last-child {
					border-bottom-left-radius: 4px;
					border-bottom-right-radius: 4px;
				}

				.info-item-title {
					width: 80px;
					flex: 0 0 80px;
					font-size: 14px;
				}

				.info-item-input {
					flex: 1;
					font-size: 14px;
					text-align: left;
					color: #666666;
				}

				.placeholderFontClass {
					color: #ddd;
				}
			}


		}

		.create-btn {
			margin: 20px;
			border: none;
			background-color: #008aff;
			color: #fff;
			font-size: 15px;
			height: 35pt;
			line-height: 35pt;

			&::after {
				border: none;
			}

			&:active {
				background-color: #0076DB;
			}
		}
	}
</style>
